<template>
  <van-popup style="width: 100%;height: 100%;"  teleport="body" v-model:show="show">
    <div class="wrapper">
      <div class="block">
        <div class="title_head theme_color background_item light_border_bottom">
          <i class="iconfont icon-fanhui icon_back" @click="show = false" name="arrow-left"> </i>
          <div class="titleClass">{{  t('chooseTarder') }} </div>
          <div class="title_right" @click="clearShop">清空</div>
        </div>
        <div class="search-wrap">
        <van-search
          v-model="searchValue"
          label=""
          @update:model-value="getSearch"
          :placeholder="t('EnterSearchKeywords')"
          @search="onSearchCity"
        >
        </van-search>
      </div>
        <van-radio-group  v-model="checked" shape="dot">
          <van-cell v-for="item in shopList" @click="shopChange(item)" :key="item.account">
            <template #icon>
              <van-image v-if="item.url" round fit="cover" :src="item.url" />
              <div v-else class="shop_img">
                {{ item.name.slice(0,1) }}
              </div>
            </template>

            <template #title>
              <div class="titleName">
                <div>{{ item["name"] }}</div>
                <div class="name">{{ item.describe }}</div>
                <div class="name"> {{ t('tipRate') }}： {{ item.tipRate*10000/100 }} %</div>
              </div>
              <van-radio :checked-color="store.state.themeColor" :icon-size="22" :name="item['account']"></van-radio>
            </template>
          </van-cell>
        </van-radio-group>
      </div>
    </div>
  </van-popup>
</template>
<script setup>
import { useStore } from "vuex";
import { ref, onMounted, computed, reactive } from "vue";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
const store = useStore();
const emit = defineEmits(["change", "update:modelValue","clear"]);
const props = defineProps({
  cityInfo: {
    type: Object,
    default() {
      return {};
    },
  },
  checkedValue:{
    type:String,
    default:''
  },
  modelValue: {
    type: Boolean,
    default: false,
  },
});
const debounce = (func, wait) => {
  let timeout;
  return function debounced(...args) {
    const ctx = this;
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(ctx, args);
    }, wait);
  };
};
const searchValue = ref("")
const searchList = ref("")
let show = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
const shopList = computed(()=>{
  if(searchValue.value){
    searchList.value = [];
      store.state.shopList.forEach((res) => {
        if (
          res.name.indexOf(searchValue.value) >= 0 
        ) {
          searchList.value.push(res);
        }
      });
      return searchList.value
  }else{
    return store.state.shopList
  }
})
const onSearchCity = (value) => {

};
const getSearch = debounce(onSearchCity, 500);
let checked = computed({
  get() {
    return props.checkedValue;
  },
  set(value) {
    emit("update:checkedValue", value);
  },
});
// 改变法币查询
const shopChange = (item) => {
  emit("change", item);
  show.value = false;
};
// 改变法币查询
const clearShop = (item) => {
  emit("clear");
  show.value = false;
};

</script>
<style>
.van-popup--center{
  max-width: 10rem !important;
}
</style>
<style lang="scss" scoped>
:deep .van-search__content{
  background: #353535;
}
  .shop_img {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #4653c8;
    border-radius: 50%;
    margin-right: 6px;
    height: 40px;
    width: 40px;
    .default_img {
      height: 30px;
      width: 30px;
      font-size: 30px;
      display: inline-block;
      background: #010e39;
      border-radius: 8px;
      padding: 6px;
    }
  }
.wrapper {
  display: flex;
  .block {
    position: relative;
    max-width: 10rem;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    .title_head {
      height: 40px;
      text-align: center;
      display: flex;
      max-width: 10rem;
      width: 100%;
      align-items: center;
      justify-content: center;
      position: sticky;
      top: 0;
      font-size: 12px;
      z-index: 7;

      .titleClass {
        font-size: 14px;
        font-weight: bold;
        font-family: '微软雅黑';
      }

      .left_icon {
        position: absolute;
        z-index: 50;
        right: 10px;
        top: 14px;
        font-size: 16px;
        display: flex;
        align-items: center;

        img {
          height: 16px;
        }
      }
      .title_right{
        position: absolute;
        z-index: 50;
        right: 10px;
        top: 14px;
        // color: #333;
        display: flex;
        align-items: center; 
      }
      .icon_back {
        position: absolute;
        z-index: 50;
        left: 10px;
        top: 14px;
        // color: #333;
        font-size: 16px;
        display: flex;
        align-items: center;

        .back {
          font-size: 0.32px;
          margin-left: 5px;
        }
      }
    }

    .logo-wrap {
      text-align: center;

      .logo {
        display: block;
        height: 1.6rem;
        width: 2.21333rem;
        margin: 0 auto;
      }

      .name {
        margin-top: 0.53333rem;
        font-size: 0.48rem;
      }
    }

    .van-image {
      margin-right: 0.4rem;
      width: 1rem;
      height: 1rem;
    }

    .van-cell {
      font-size: 12px;
      align-items: center;
      line-height: 14px;
    }

    // :deep .van-index-bar__sidebar {
    //   display: none;
    // }
    :deep .van-cell__title {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .titleName {}

    .name {
      color: #666;
      font-size: 0.32rem;
    }

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.4rem 0.53333rem 0.4rem;
      font-size: 0.48rem;
      font-weight: 500;
      color: #000;
    }

    .van-index-bar {
      overflow-y: auto;
    }
  }
}

.van-popup {
  z-index: 9;
}</style>
  